{% extends "base.html" %}
{% block head %}
	{{ super() }}
    <script type="text/javascript" src="static/js/echarts.js"></script>
    <script type="text/javascript" src="static/js/echarts.min.js"></script>
    <script type="text/javascript" src="static/js/china.js"></script>
{% endblock head %}
{% block left %}
	{{ super() }}
{% endblock left %}
{% block right %}
	{{ super() }}
	<!-- 修改name（页面名称） -->
	{% set name = '微信好友分析' %}
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>{{name}}</legend>
	</fieldset>
	<!-- 页面私有部分 -->
        <button class="layui-btn " name="login" onclick="lc(this);">获取二维码</button>
        <button class="layui-btn disabled" onclick="refurbish(this)">刷新</button>
        <button class="layui-btn disabled" onclick="statistic(this)">统计</button>
        <button class="layui-btn disabled" onclick="wc(this)">词云</button>
        <button class="layui-btn disabled" onclick="ec(this)">退出登录</button>
{#    <div><img src="/static/pic/QR.png"></div>#}
    <br />
    <img src="" id="oImg" style="display:none;margin: 100px 650px;" width="320px" hight="400px">
    <img src="" id="loading" style="display:none;margin: 200px 800px;" width="32px" hight="40px">

    <style>
    .disabled{
        background: #999;
    }
    {#.layui-body{#}
    {#    overflow-y: hidden;#}
    {#}#}
    </style>


<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <br />
    <br />
    <br />
    <div style="display:inline">
    <div id="sex" style="width: 800px;height:600px;float:left"></div>
    <div id="city" style="width: 800px;height:600px;float:right"></div>
    </div>
    <img src="" id="RemarkName" style="display: none; width: 100%; height: 100%;object-fit: contain;" width="1024px" hight="768px">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myCharsex = echarts.init(document.getElementById('sex'));
        var myCharcity = echarts.init(document.getElementById('city'));
        // 获取所有按钮
        var btn = document.querySelectorAll('.layui-btn');

        // 指定图表的配置项和数据
        var optionsex1 = {
            title: {
                text: '好友性别分布'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["男","女","其他"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data:[]

                {#data:[30, 12, 4]#}
            }]
        };
        var optionsex = {
    title : {
        text: '好友性别分布',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['男','女','其他']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            data:[
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
        var optioncity = {
                backgroundColor: '#FFFFFF',
                title: {
                    text: '好友地区分布',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },

                //左侧小导航图标
                visualMap: {
                    show : true,
                    x: 'left',
                    y: 'center',
                    splitList: [
                        {start: 100, end:1000},{start: 50, end: 100},
                        {start: 20, end: 50},{start: 10, end: 20},
                        {start: 5, end: 10},{start: 0, end: 5},
                    ],
                    color: ['#f50d2d', '#ea34b7', '#b740ef','#782ee2', '#bf3ce6', '#9fb5ea']
                },

                //配置属性
                series: [{
                    name: '地区',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        normal: {
                            show: true  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:[]  //数据
                }]
            };

        // 使用刚指定的配置项和数据显示图表。
        window.onload=function () {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            {#var data ='{  "url_id" :' + url_id + '}';#}
            xmlhttp.open("POST","status",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function()
        {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
            {
            var c = JSON.parse(xmlhttp.responseText)
                {#alert(c.code)#}
                if (c.code == 1000){
                   btn[2].classList.remove('disabled');
                   {#btn[3].classList.remove('disabled');#}
                   btn[4].classList.remove('disabled');
                   btn[0].classList.add('disabled')
                }

            }
        }
        }

</script>

</body>

{% endblock right %}
<!-- 此模板现有部分，除页面名称外，其他均不可编辑 -->